/**
 * Created by levy on 2016/12/19
 */
import React from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router'
import mui from '../../../lib/js/mui'
import {getUserId, ajax} from '../util'
import _ from 'lodash'
import Loading from './Loading'
import Report from './BudgetReport'
import Header from './Header'

@connect(
    state => {
        return {
            budget: state.budget
        }
    }
)
@withRouter
export default class TaskDetail extends React.Component {
    state = {
        detail: '',
        commentList: [],
        showMask: false,
        isPass: false,
        loading: true
    }
    componentDidMount() {
        let {query} = this.props.location,
            url = `/workflow/api/v1/process-history-detail/pId/${query.processInstanceId}/pdId/${query.processDefinitionId}`,
            detail,
            commentList

        if (query.type == 'todo') {
            url = `/workflow/api/v1/get-form/task/${query.processInstanceId}/pdId/${query.processDefinitionId}`
        }

        ajax({
            url: url,
            success: data => {
                detail = (
                    <form className="mui-input-group">
                        <div className="mui-input-row">
                            <label>流程状态</label>
                            <input type="text" readOnly value={data.isEnded ? '已结束' : data.currentNode}/>
                        </div>
                        {
                            data.userForm.map((form, index) => (
                                <div className="mui-input-row" key={index}>
                                    <label>{form.label}</label>
                                    <input type="text" readOnly value={form.value}/>
                                </div>
                            ))
                        }
                    </form>
                )
                
                commentList = (
                    <ul className="timeline">
                        {
                            // <li className="time-label">审批历史</li>
                        }

                        {
                            data.commentList.map(comment => (
                                <li key={comment.createTime}>
                                    <i className="timeline-icon mui-icon mui-icon-email"/>
                                    <div className="timeline-item">
                                        <span className="time">{comment.createTime}</span>

                                        <h3 className="timeline-header">{comment.name}</h3>

                                        <div className="timeline-body">
                                            {comment.dealOpinion}
                                        </div>
                                    </div>
                                </li>
                            ))
                        }
                    </ul>
                )
                
                this.setState({detail: detail, commentList: commentList, loading: false})

                // 报表逻辑
                if (!data.budget_modId) return

                this.props.dispatch({
                    type: 'budget/fetchBudgetModule',
                    moduleId: data.budget_modId
                })

                this.props.dispatch({ type: 'budget/fetchDimTitles' })

                this.props.dispatch({
                    type: 'budget/fetchReportData',
                    moduleId: data.budget_modId,
                    keys: data.budget_keys,
                    values: data.budget_values,
                    body: data.budget_map
                })

                let keys = _.keys(data.budget_map),
                    values = _.values(data.budget_map)

                keys.push(data.budget_keys)
                values.push(data.budget_values)

                this.props.dispatch({
                    type: 'budget/fetchReportStruct',
                    moduleId: data.budget_modId,
                    keys: keys.toString(),
                    values: values.toString()
                })
            }
        })
    }
    componentWillUnmount() {
        this.props.dispatch({ type: 'budget/showReport', show: false })
    }
    render() {
        let {query} = this.props.location
        let {loading} = this.state

        return (
            <div className="task-detail">
                <Header title={query.title}/>
                <div className="mui-content">
                    {this.state.detail}
                    {this.state.commentList}
                    <Report/>
                    {
                        !loading && query.type == 'todo' ?
                            <div className="fixed-wrapper">
                                <div className="fixed-content">
                                    <div className="mui-button-row">
                                        <button className="mui-btn mui-btn-danger" onClick={this.showMask.bind(this, false)}>拒绝</button>
                                        <button className="mui-btn mui-btn-primary" onClick={this.showMask.bind(this, true)}>同意</button>
                                    </div>
                                </div>
                            </div>
                            : null
                    }
                    {
                        query.type == 'todo' ?
                            <div className={'mui-backdrop ' + (this.state.showMask ? 'active' : '')}>
                                <div className="fixed-content">
                                    <textarea id="comment" cols="30" rows="10" placeholder="请输入意见"/>
                                    <div className="mui-button-row">
                                        <button className="mui-btn mui-btn-danger" onClick={this.cancel}>取消</button>
                                        <button className="mui-btn mui-btn-primary" onClick={this.submit}>确定</button>
                                    </div>
                                </div>
                            </div>
                            : null
                    }
                </div>
                <Loading loading={this.state.loading || this.props.budget.tableLoading}/>
            </div>
        )
    }
    showMask(isPass) {
        this.setState({
            showMask: true,
            isPass
        })
    }
    cancel = () => {
        this.setState({showMask: false})
    }
    submit = () => {
        let {query} = this.props.location,
            isPass = this.state.isPass,
            comment = isPass ? '[同意]' : '[不同意]',
            $comment = mui('#comment')[0]

        comment += $comment.value

        ajax({
            url: `/workflow/api/v1/task-complete/${query.taskId}/user/${getUserId()}`,
            contentType: 'application/json',
            type: 'POST',
            data: {
                comment: comment,
                pass: isPass + ''
            }
        }, data => {
            if (data.msg == 'ok') {
                mui.alert('操作成功', () => this.props.router.goBack())
            }
            else
                mui.alert(data.msg)
        })
    }
}

